<template>
  <view class="shoppingCarBody">
    <view class="shoppingCarItem" v-for="item in list" :key="item.id">
      <view
        v-if="canCountChange"
        :class="
          selectedIds.find((i) => item.id === i)
            ? 'shoppingCarCheckBox shoppingCarCheckBoxSelected'
            : 'shoppingCarCheckBox shoppingCarCheckBoxNoSelected'
        "
        @tap="toggleSelect(item.id)"
      ></view>
      <view class="shoppingCarFlexImage">
        <image class="image" :src="getMainImageUrl(item.product)" />
      </view>
      <view class="shoppingCarFlex">
        <view class="name">名称: {{ item.product.name }}</view>
        <view class="specs">
          {{ specValue(item).name }}: {{ specValue(item).value }}
        </view>
        <view class="shoppingCarPrice">
          <text v-if="item.price.points">
            <text class="number">
              {{ item.price.points }}
            </text>
            <text>积分</text>
          </text>
          <text v-if="item.price.money">
            <text>￥</text>
            <text class="number">{{ moneyFormat(item.price.money) }}</text>
          </text>
        </view>
      </view>
      <view class="shoppingCarFlex inputNumber">
        <view class="inputNumberButton">
          <AtInputNumber
            v-if="canCountChange"
            :min="0"
            :value="item.count"
            :onChange="(v) => setCount({ id: item.id, count: v })"
          />
          <view class="rightCount" v-else>x{{ item.count }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import "./index.less";
import { AtInputNumber } from "taro-ui-vue";
import {
  moneyFormat,
  getMainImageUrl,
} from "../../../../services/products-service";
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    setCount: {
      type: Function,
      default: () => {},
    },
    toggleSelect: {
      type: Function,
      default: () => {},
    },
    selectedIds: {
      type: Array,
      default: [],
    },
    canCountChange: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    moneyFormat,
    getMainImageUrl,
    specValue(item) {
      const { specId, product } = item;
      console.log(item);
      const { specs } = product;
      const selectedSpec = specs.find((spec) => spec.id === specId) || {
        specItem: {},
      };
      const { valueName: value, keyName: name } = selectedSpec.specItem;
      return { value, name };
    },
  },
  components: {
    AtInputNumber,
  },
};
</script>
<style lang="scss">
@import "~taro-ui-vue/dist/style/components/input-number.scss";
@import "~taro-ui-vue/dist/style/components/icon.scss";
</style>